<template>
  <div class="accessCode">
    <breadcrumb :titleArr="titleArr" @back="breadcrumbBack" class="bread-crumb"></breadcrumb>
    <div class="codeBox">
      <h3>JS代码接入设置</h3>
      <div class="title">
        <span class="V7_iconfont V7_iconV7tubiao_tishi"></span>
        将此代码复制并粘贴到你网站的body标签之前，保存并发布网站，即可完成在线客服的植入
      </div>
      <div class="content">
        <el-input
          type="textarea"
          class="ipt"
          :disabled="true"
          v-model="accessCode">
        </el-input>
        <el-button class="copy" type="text" size="mini" @click="copyFun(accessCode)">复制代码</el-button>
      </div>
    </div>
    <div class="codeBox">
      <h3>H5专用链接</h3>
      <div class="title">
        <span class="V7_iconfont V7_iconV7tubiao_tishi"></span>
        可将链接地址复制到微信等第三方平台，访客点击对应地方即可打开咨询窗口
      </div>
      <div class="content">
        <el-input
          type="textarea"
          class="ipt"
          :disabled="true"
          v-model="accessWapCode">
        </el-input>
        <el-button class="copy" type="text" size="mini" @click="copyFun(accessWapCode)">复制代码</el-button>
        <div class="clearfix iptContent">
          <div class="wapIpt fl">
            <span>会话来源名称</span>
            <el-input v-model="wap.platform" placeholder="用于标记会话来源，方便座席识别会话" size="mini"></el-input>
          </div>
          <div class="wapIpt fl">
            <span>会话来源URL</span>
            <el-input v-model="wap.url" placeholder="用于标记会话页面" size="mini"></el-input>
          </div>
          <div class="qrCode fl">
            <el-checkbox v-model="qrCode">二维码</el-checkbox>
            <div v-if="qrCode" class="qrContent clearfix">
              <vueQr class="fl" ref="Qrcode" :text="accessWapCode" :margin="0" :logoSrc="qrCodeIcon" :logoScale="0.3" :size="64"></vueQr>
              <div class="fl right">
                <el-upload
                  class="upLoad"
                  :show-file-list="false"
                  accept=".jpg, .gif, .png, .bmp"
                  action=""
                  :on-error="uploadError"
                  :on-success="logoSuccess"
                  :before-upload="beforeUpload"
                  :http-request="uploadRequest">
                  <span>嵌入logo（图片大小不超过200kb）</span>
                </el-upload>
                <el-button type="text" size="mini" @click="downFun">下载</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import { uploadQiniu } from '@/utils/upload'
import Clipboard from 'clipboard-js'
import vueQr from 'vue-qr'
@Component({
  name: 'accessCode',
  components: {
    breadcrumb,
    vueQr
  }
})
export default class AccessCode extends Vue {
  @Prop() private codeInfo
  private $message: any
  private $store: any
  private titleArr = ['接入列表', '接入代码-网站名称']

  private wap = {
    platform: '',
    url: ''
  }

  private initConfig = '' // 上传初始化域名

  private qrCode = true // 是否展示二维码

  private qrCodeIcon = '' // 二维码icon

  private fileName = '' // 上传文件名

  get accessCode () { // 获取js接入代码
    return '<script type="text/javascript" src="' +
                      this.codeInfo.url + 'initWebimClientV7.js?accessId=' +
                      // eslint-disable-next-line no-useless-escape
                      this.codeInfo.accessId + '" async><\/script>'
  }

  get accessWapCode () { // 获取wap接入地址
    return this.codeInfo.url + '?accessId=' + this.codeInfo.accessId +
           '&imUrlTitle=' + this.wap.platform + '&imFromUrl=' + this.wap.url
  }

  private logoSuccess (data: any) { // 图片上传成功
    const config = this.$store.state.common.initConfig
    const initConfig = config ? config.qiniuDomainMap.im : ''
    this.qrCodeIcon = data.key ? `${initConfig}/${data.key}` : ''
  }

  private beforeUpload (file: any) { // 图片上传之前
    this.fileName = file.name.replace(/\s/g, '')
    if (file.size / 1024 > 200) {
      this.$message({ message: 'logo大小不能超过200kb', type: 'error' })
      return false
    }
  }

  private uploadRequest (request: any) {
    uploadQiniu({ type: 'im', fileName: this.fileName }, request)
  }

  private uploadError () { // 图片上传失败
    this.$message({ message: 'logo上传失败，请重新选择logo上传', type: 'error' })
  }

  private downFun () { // 二维码下载
    const qrcode: any = this.$refs.Qrcode
    const iconUrl = qrcode.$el.src
    const a = document.createElement('a')
    const event = new MouseEvent('click')
    a.download = '二维码'
    a.href = iconUrl
    a.dispatchEvent(event)
  }

  private copyFun (content: string) { // 复制事件
    if (content) {
      Clipboard.copy(content).then(() => {
        this.$message.success('复制成功')
      }).catch(() => {
        this.$message.error('复制失败')
      })
    }
  }

  private breadcrumbBack () {
    this.$emit('codeBack')
  }
}
</script>
<style lang="stylus" scoped>
  .accessCode
    border 1px solid $border-main
    border-radius 10px
    height 100%
    width 100%
    overflow auto
    box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
    box-sizing border-box
    margin 0 2px 2px 0
    position absolute
    left 0
    top 0
    z-index 100
    background #fff
    .title
      height 40px
      line-height 40px
      background-color #FFFBE6
      color #303753
      padding 0px 10px
      margin-top 16px
      .V7_iconV7tubiao_tishi
        color #FAAD14
        margin-right 8px
        vertical-align middle
    .codeBox
      margin-top 40px
      padding 0px 24px 24px
    .content
      margin-top 10px
      position relative
      .ipt
        margin-top 10px
      >>> .el-textarea__inner
          resize none
          padding-top 16px
          color #008CEE
      .copy
        position absolute
        right 10px
        top 60px
      .iptContent
        margin-top 30px
        .wapIpt
          width 30%
          margin-right 24px
        .wapIpt > span
          margin-bottom 10px
          display inline-block
      .qrCode
        width 30%
        .qrContent
          margin-top 8px
          padding 10px
          background-color #F4F6F9
          .right
            padding 10px
            margin-left 10px
</style>
